<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="UTF-8">
    <title>ECharts</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.6.0/echarts.min.js"></script>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .checkbox-container {
             margin-bottom: 10px;
            text-align: center;
         }
        .chart-container {
            width: 100%;
            height: 400px;
        }
        #main {
            flex-grow: 0.8;
        }
        footer {
            text-align: center;
            padding: 10px;
            background-color: #f1f1f1;
            font-size: 14px;
            color: #666;
        }
    </style>
</head>
<body>
<div id="weight-info" style="text-align: center;padding: 10px; background-color: #f0f0f0; border-bottom: 1px solid #ccc;"></div>
<div class="checkbox-container">
    <label><input type="checkbox" id="showWeight" checked> 体重</label>
    <label><input type="checkbox" id="showAvg" checked> 7天平均值</label>
    <label><input type="checkbox" id="showMin" > 7天最小值</label>
    <label><input type="checkbox" id="showMax" > 7天最大值</label>
<!--    <label><input type="checkbox" id="showSum" > 7天总和</label>-->
</div>
<div id="main"></div>
<footer>
    辽ICP备2022006881号
</footer>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));

    var extremePoints = [];  // 用于存储每组7天的最大值和最小值点

    var avgPoints = [];  // 存储7天平均值点
    var avgLineData = [];  // 存储7天平均值数据
    var maxLineData = [];  // 存储7天最大值数据
    var minLineData = [];  // 存储7天最小值数据

    const data = [
        ['2024-05-27', 86.4], ['2024-05-28', 86], ['2024-05-29', 85.8], ['2024-05-30', 85.5], ['2024-05-31', 85.2], ['2024-06-01', 84.4], ['2024-06-02', 84.6],
        ['2024-06-03', 84.4], ['2024-06-04', 84.6], ['2024-06-05', 84.2], ['2024-06-06', 84.5], ['2024-06-07', 84.5], ['2024-06-08', 83.9], ['2024-06-09', 84.3],
        ['2024-06-10', 83.1], ['2024-06-11', 82.8], ['2024-06-12', 82.5], ['2024-06-13', 82], ['2024-06-14', 82.3], ['2024-06-15', 82.5], ['2024-06-16', 82.8],
        ['2024-06-17', 82.3], ['2024-06-18', 81.8], ['2024-06-19', 82], ['2024-06-20', 82.2], ['2024-06-21', 82.7], ['2024-06-22', 82.3], ['2024-06-23', 81.9],
        ['2024-06-24', 82], ['2024-06-25', 81.2], ['2024-06-26', 80.8], ['2024-06-27', 80.5], ['2024-06-28', 80.7], ['2024-06-29', 80.3], ['2024-06-30', 80.91],
        ['2024-07-01', 79.8], ['2024-07-02', 79.1], ['2024-07-03', 78.9], ['2024-07-04', 78.5], ['2024-07-05', 78.8], ['2024-07-06', 79.2], ['2024-07-07', 79.1],
        ['2024-07-08', 79.6], ['2024-07-09', 79], ['2024-07-10', 78.7], ['2024-07-11', 78.5], ['2024-07-12', 77.9], ['2024-07-13', 78.2], ['2024-07-14', 78.5],
        ['2024-07-15', 77.7], ['2024-07-16', 77.5], ['2024-07-17', 77.2], ['2024-07-18', 77.2], ['2024-07-19', 77.2], ['2024-07-20', 76.5], ['2024-07-21', 77.1],
        ['2024-07-22', 77.2], ['2024-07-23', 77.4], ['2024-07-24', 76.6], ['2024-07-25', 76.5], ['2024-07-26', 76.3], ['2024-07-27', 75.6], ['2024-07-28', 76.4],
        ['2024-07-29', 76.5], ['2024-07-30', 76.1], ['2024-07-31', 75.4], ['2024-08-01', 76], ['2024-08-02', 75], ['2024-08-03', 76], ['2024-08-04', 75.5],
        ['2024-08-05', 76.3], ['2024-08-06', 75.9], ['2024-08-07', 74.8], ['2024-08-08', 74.6], ['2024-08-09', 74.1], ['2024-08-10', 73.9], ['2024-08-11', 74],
        ['2024-08-12', 74.1], ['2024-08-13', 74.9], ['2024-08-14', 73.9], ['2024-08-15', 74.1], ['2024-08-16', 73.5], ['2024-08-17', 73.6], ['2024-08-18', 73],
        ['2024-08-19', 73.7], ['2024-08-20', 73.9], ['2024-08-21', 72.8], ['2024-08-22', 72.9], ['2024-08-23', 72.8], ['2024-08-24', 73.0], ['2024-08-25', 72.9],
        ['2024-08-26', 73.2], ['2024-08-27', 72.6], ['2024-08-28', 71.9], ['2024-08-29', 71.6], ['2024-08-30', 72], ['2024-08-31', 72.1], ['2024-09-01', 72.6],
        ['2024-09-02', 72.8], ['2024-09-03', 71.5], ['2024-09-04', 70.9], ['2024-09-05', 70.9], ['2024-09-06', 70.3], ['2024-09-07', 71.1], ['2024-09-08', 70.7],
        ['2024-09-09', 70.7], ['2024-09-10', 69.8], ['2024-09-11', 69.6], ['2024-09-12', 69.8], ['2024-09-13', 70], ['2024-09-14', 70.5], ['2024-09-15', 71.3],
        ['2024-09-16', 72.3], ['2024-09-17',71.9], ['2024-09-18', 70.8], ['2024-09-19', 70.0], ['2024-09-20', 69.6], ['2024-09-21', 69.2], ['2024-09-22', 69.5],
        ['2024-09-23', 69.7], ['2024-09-24', 70.4], ['2024-09-25', 69.9], ['2024-09-26', 69.4], ['2024-09-27', 68.6], ['2024-09-28', 69.1], ['2024-09-29', 69.4],
        ['2024-09-30', 69.2], ['2024-10-01'], ['2024-10-02'], ['2024-10-03'], ['2024-10-04'], ['2024-10-05'], ['2024-10-06', 68.9],
        ['2024-10-07', 69.5], ['2024-10-08', 70.3], ['2024-10-09', 69.3], ['2024-10-10', 69.3], ['2024-10-11', 70.2], ['2024-10-12', 70], ['2024-10-13', 69.5],
        ['2024-10-14', 70.3], ['2024-10-15', 69.6], ['2024-10-16', 69.4], ['2024-10-17', 69.1], ['2024-10-18', 68.9], ['2024-10-19', 68.3], ['2024-10-20', 67.4],
        ['2024-10-21', 68.1], ['2024-10-22', 68.1], ['2024-10-23', 68.4], ['2024-10-24', 68], ['2024-10-25', 68.5], ['2024-10-26', 69.4], ['2024-10-27', 68.9],
        ['2024-10-28', 68.7], ['2024-10-29', 68.5], ['2024-10-30', 68.2], ['2024-10-31', 68.5], ['2024-11-01', 68.3], ['2024-11-02', 68.5], ['2024-11-03', 68.8],
        ['2024-11-04', 68.4], ['2024-11-05', 68.1], ['2024-11-06', 68.7], ['2024-11-07', 67.9], ['2024-11-08', 67.6], ['2024-11-09', 67.7], ['2024-11-10', 68.3],
        ['2024-11-11', 68.9], ['2024-11-12', 67.8], ['2024-11-13', 67.5], ['2024-11-14', 67.4], ['2024-11-15', 67.8], ['2024-11-16', 68.1], ['2024-11-17', 67.5],
        ['2024-11-18', 67.7], ['2024-11-19',67.9], ['2024-11-20', 67.5], ['2024-11-21', 67.8], ['2024-11-22', 67.9], ['2024-11-23', 68.1], ['2024-11-24', 68.7],
        ['2024-11-25', 68.6], ['2024-11-26', 68.4], ['2024-11-27', 67.6], ['2024-11-28', 68.1], ['2024-11-29', 68.6], ['2024-11-30', 68.6], ['2024-12-01', 68.2],
        ['2024-12-02', 67.4], ['2024-12-03', 67.5], ['2024-12-04', 67.4], ['2024-12-05', 67.5], ['2024-12-06', 67.7], ['2024-12-07', 67.3], ['2024-12-08', 66.6],
        ['2024-12-09', 66.9], ['2024-12-10', 67.7], ['2024-12-11', 68.9], ['2024-12-12', 68.3], ['2024-12-13', 68.4], ['2024-12-14', 68.9], ['2024-12-15', 68.3],
        ['2024-12-16', 68.6], ['2024-12-17', 67.9], ['2024-12-18', 67.7], ['2024-12-19', 68.2], ['2024-12-20', 68.7], ['2024-12-21', 69.2], ['2024-12-22', 69.2],
        ['2024-12-23', 69.3], ['2024-12-24', 68.6], ['2024-12-25', 67.3], ['2024-12-26', 67.8], ['2024-12-27', 68.8], ['2024-12-28', 68.6], ['2024-12-29', 67.7],
        ['2024-12-30', 67.2], ['2024-12-31', 67.4], ['2025-01-01', 66.8], ['2025-01-02', 67.2], ['2025-01-03', 67.2], ['2025-01-04', 67.8], ['2025-01-05', 67.4],
        ['2025-01-06', 67.1], ['2025-01-07', 67.5], ['2025-01-08', 67.4], ['2025-01-09', 68.6], ['2025-01-10', 67.8], ['2025-01-11', 67.7], ['2025-01-12', 66.9],
        ['2025-01-13', 66.4], ['2025-01-14', 66.0], ['2025-01-15', 66.0], ['2025-01-16', 66.5], ['2025-01-17', 66.9], ['2025-01-18', 67.4], ['2025-01-19', 66.4],
        ['2025-01-20', 66.1], ['2025-01-21', 66.3], ['2025-01-22', 66.8], ['2025-01-23', 67.0], ['2025-01-24', 67.4], ['2025-01-25', 66.8], ['2025-01-26', 65.8],
        ['2025-01-27', 65.5], ['2025-02-01', 66.6], ['2025-02-05', 68.2], ['2025-02-06', 68.1], ['2025-02-07', 68.5], ['2025-02-08', 68.1], ['2025-02-09', 67.0],
        ['2025-02-10', 67.0], ['2025-02-11', 67.5], ['2025-02-12', 67.1], ['2025-02-13', 67.0], ['2025-02-14', 67.3], ['2025-02-15', 67.0], ['2025-02-16', 66.5],
        ['2025-02-17', 66.8], ['2025-02-18', 67.4], ['2025-02-19', 67.6], ['2025-02-20', 67.6], ['2025-02-21', 67.0], ['2025-02-22', 66.8], ['2025-02-23', 67.0],
        ['2025-02-24', 67.2], ['2025-02-25', 66.4], ['2025-02-26', 66.0], ['2025-02-27', 66.1], ['2025-02-28', 66.1], ['2025-03-01', 66.4], ['2025-03-02', 67.1],
        ['2025-03-03', 66.3], ['2025-03-04', 65.6], ['2025-03-05', 65.6], ['2025-03-06', 65.8], ['2025-03-07', 66.6], ['2025-03-08', 66.2], ['2025-03-09', 66.7],
        ['2025-03-10', 66.2], ['2025-03-11', 65.8], ['2025-03-12', 65.8], ['2025-03-13', 66.5], ['2025-03-14', 65.8], ['2025-03-15', 65.8], ['2025-03-16', 66.0],
        ['2025-03-17', 66.1], ['2025-03-18', 66.1], ['2025-03-19', 67.2], ['2025-03-20', 65.7], ['2025-03-21', 65.4], ['2025-03-22', 65.1], ['2025-03-23', 65.5],
        ['2025-03-24', 64.7], ['2025-03-25', 65.3], ['2025-03-26', 65.4], ['2025-03-27', 65.5], ['2025-03-28', 65.4], ['2025-03-29', 65.9], ['2025-03-30', 66.3],
        ['2025-03-31', 66.3], ['2025-04-01', 65.7], ['2025-04-02', 65.0], ['2025-04-03', 65.3], ['2025-04-04', 64.9], ['2025-04-05', 65.8], ['2025-04-06', 65.1],
        ['2025-04-07', 65.6], ['2025-04-08', 65.0], ['2025-04-09', 65.6], ['2025-04-10', 64.3], ['2025-04-11', 64.9], ['2025-04-12', 65.4], ['2025-04-13', 65.6],
        ['2025-04-14', 65.7], ['2025-04-15', 65.9], ['2025-04-16', 65.9], ['2025-04-17', 64.4], ['2025-04-18', 64.0], ['2025-04-19', 64.4], ['2025-04-20', 64.2],
        ['2025-04-21', 64.0], ['2025-04-22', 64.2], ['2025-04-23', 63.7], ['2025-04-24', 64.3], ['2025-04-25', 65.0], ['2025-04-26', 64.0], ['2025-04-27', 64.8],
        ['2025-04-28', 64.5]

    ];


    // 提取日期列表
    var xAxisData = data.map(function (item) {
        return item[0];
    });

    // 提取重量列表
    var weightData = data.map(function (item) {
        return item[1];
    });

    // 计算每隔7天的平均值
    for (var i = 0; i < weightData.length; i += 7) {
        var sum = 0;
        var count = 0;
        var maxVal = -Infinity;
        var minVal = Infinity;

        for (var j = i; j < i + 7 && j < weightData.length; j++) {
            sum += weightData[j];
            count++;
            maxVal = Math.max(maxVal, weightData[j]);  // 计算最大值
            minVal = Math.min(minVal, weightData[j]);  // 计算最小值
        }

        var avg = sum / count;

        // 将每组的平均值、最大值和最小值加入对应数组
        avgLineData.push([xAxisData[i + count - 1], avg]);  // 每组最后一个日期作为X轴位置
        maxLineData.push([xAxisData[i + count - 1], maxVal]);  // 每组最后一个日期作为X轴位置
        minLineData.push([xAxisData[i + count - 1], minVal]);  // 每组最后一个日期作为X轴位置

        // 将平均值点加入 avgPoints 数组
        avgPoints.push({
            coord: [xAxisData[i + count - 1], avg],  // 使用每组最后一个日期作为X轴位置
            value: avg.toFixed(1),       // 显示平均值并保留一位小数
            itemStyle: {
                color: 'transparent'  // 默认点的颜色透明
            },
            emphasis: {
                itemStyle: {
                    color: 'red'  // 鼠标悬停时显示红色点
                }
            }
        });
    }

    var option = {
        responsive: true,
        title: {
            text: '变化记录'
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: xAxisData,
            axisLabel: {
                interval: 6 // 每隔7天显示一个标签 (0, 6, 13,...表示每第7个数据)
            },
            splitLine: {
                show: true,
                interval: 6,  // 每隔7天显示一个竖向分割线
                lineStyle: {
                    type: 'dashed', // 分割线样式为虚线
                    color: '#ccc'
                }
            }
        },
        yAxis: {
            type: 'value',
            min: 60,  // 根据数据设置最小值
            max: 90,  // 根据数据设置最大值
            interval: 2,  // 设置刻度间隔为 2.5 kg
            axisLabel: {
                formatter: '{value} kg'
            }
        },
        series: [
            {
                name: '体重 (kg)',
                type: 'line',
                data: weightData,
                markPoint: {
                    data: [
                        { type: 'max', name: '最大值' },
                        { type: 'min', name: '最小值' }
                    ]
                },
                markLine: {
                    data: [
                        { type: 'average', name: '平均值' },
                        {
                            yAxis: 70,
                            label: {
                                formatter: '70kg ↓',
                                position: 'end',
                                fontWeight: 'bold'
                            },
                            lineStyle: {
                                color: 'red',
                                type: 'dashed'
                            }
                        },
                        {
                            yAxis: 65,
                            label: {
                                formatter: '65kg ↑',
                                position: 'end',
                                fontWeight: 'bold'
                            },
                            lineStyle: {
                                color: 'green',
                                type: 'dashed'
                            }
                        }
                    ]
                }
            },
            {
                name: '7天平均值',
                type: 'line',
                data: avgLineData,  // 使用计算的平均值数据绘制连接线
                lineStyle: {
                    type: 'dashed',  // 平均线样式为虚线
                    color: 'orange'     // 平均线颜色橙色
                },
                itemStyle: {
                    color: 'orange'     // 平均值点的颜色
                },
                markPoint: {
                    data: avgPoints  // 使用计算的平均值点数据
                }
            },
            {
                name: '7天最大值',
                type: 'line',
                data: maxLineData,
                lineStyle: {
                    type: 'solid',  // 实线样式
                    color: 'red'  // 颜色为红色
                },
                itemStyle: {
                    color: 'red'  // 数据点的颜色
                }
            },
            {
                name: '7天最小值',
                type: 'line',
                data: minLineData,
                lineStyle: {
                    type: 'solid',  // 实线样式
                    color: 'green' // 颜色为绿色
                },
                itemStyle: {
                    color: 'green' // 数据点的颜色
                }
            }
            // ,
            // {
            //     name: '7天总和',
            //     type: 'line',
            //     data: sumLineData,
            //     lineStyle: {
            //         type: 'dashed',  // 虚线样式
            //         color: 'blue'    // 颜色为蓝色
            //     },
            //     itemStyle: {
            //         color: 'blue'    // 数据点的颜色
            //     }
            // }
        ]
    };

    // 获取 xAxis 数据的第一个和最后一个值
    var xAxisData = option.xAxis.data;
    var startDate = new Date(xAxisData[0]);
    var endDate = new Date(xAxisData[xAxisData.length - 1]);

    // 计算日期差异
    var diffTime = Math.abs(endDate - startDate);
    var diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

    myChart.setOption(option);

    // 处理复选框的显示与隐藏
    function updateSeriesVisibility() {
        var showWeight = document.getElementById('showWeight').checked;
        var showAvg = document.getElementById('showAvg').checked;
        var showMin = document.getElementById('showMin').checked;
        var showMax = document.getElementById('showMax').checked;
        // var showSum = document.getElementById('showSum').checked;

        myChart.setOption({
            series: [
                {
                    name: '体重 (kg)',
                    data: showWeight ? weightData : []  // 显示或隐藏体重线
                },
                {
                    name: '7天平均值',
                    data: showAvg ? avgLineData : []  // 显示或隐藏7天平均值线
                },
                {
                    name: '7天最小值',
                    data: showMin ? minLineData : []  // 显示或隐藏7天最小值线
                },
                {
                    name: '7天最大值',
                    data: showMax ? maxLineData : []  // 显示或隐藏7天最大值线
                }
                // ,
                // {
                //     name: "7天总和",
                //     data: showSum ? sumLineData : [] // 7天总和
                // }
            ]
        });
    }

    // 添加复选框的事件监听
    document.getElementById('showWeight').addEventListener('change', updateSeriesVisibility);
    document.getElementById('showAvg').addEventListener('change', updateSeriesVisibility);
    document.getElementById('showMin').addEventListener('change', updateSeriesVisibility);
    document.getElementById('showMax').addEventListener('change', updateSeriesVisibility);
    // document.getElementById('showSum').addEventListener('change', updateSeriesVisibility);

    // 初始显示设置
    updateSeriesVisibility();

    // 初始化最重和最轻体重的值和日期
    var maxWeight = -Infinity;
    var minWeight = Infinity;
    var maxWeightDate = '';
    var minWeightDate = '';

    // 计算最大体重、最小体重及其对应日期
    for (var i = 0; i < weightData.length; i++) {
        if (weightData[i] > maxWeight) {
            maxWeight = weightData[i];
            maxWeightDate = xAxisData[i];
        }
        if (weightData[i] < minWeight) {
            minWeight = weightData[i];
            minWeightDate = xAxisData[i];
        }
    }

    // 计算体重变化的两倍
    var startWeight = weightData[0];
    var endWeight = weightData[weightData.length - 1];
    var weightDifference = (endWeight - startWeight) * 2;

    // 显示在页面顶部
    var infoElement = document.getElementById('weight-info');
    infoElement.innerHTML = `
    记录减肥第: ${diffDays} 天 <br/>
    体重最重: ${maxWeightDate} (${maxWeight}kg) <br>
    体重最轻: ${minWeightDate} (${minWeight}kg) <br>
    最后一日与第一日体重差: ${weightDifference.toFixed(1)} 斤
`;

    // 监听窗口大小变化事件
    window.addEventListener('resize', function() {
        myChart.resize();
    });
</script>
</body>
</html>
